<template>
  <div>
    <a-table
      :columns="columns"
      :row-key="record => record.login.uuid"
      :data-source="dataSource"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
    >
      <template #bodyCell="{ column, text }">
        <template v-if="column.dataIndex === 'name'">{{ text.first }} {{ text.last }}</template>
      </template>
    </a-table>
  </div>
</template>
<script>
// vue-request vue 请求的扩展库
// usePagination 对分页扩展
import { usePagination } from 'vue-request'
import { computed, defineComponent } from 'vue'
import axios from 'axios'
// 表头数据
const columns = [{
  title: 'Name',
  dataIndex: 'name',
  sorter: true,
  width: '20%'
}, {
  title: 'Gender',
  dataIndex: 'gender',
  filters: [{
    text: 'Male',
    value: 'male'
  }, {
    text: 'Female',
    value: 'female'
  }],
  width: '20%'
}, {
  title: 'Email',
  dataIndex: 'email'
}]
// 请求表格数据
const queryData = params => {
  return axios.get('https://randomuser.me/api?noinfo', {
    params
  })
}

export default defineComponent({
  setup () {
    const {
      data: dataSource,
      run,
      loading,
      current, // 请求回来的当前页码
      pageSize // 请求回来的每页条数
    } = usePagination(queryData, {
      formatResult: res => res.data.results,
      pagination: {
        currentKey: 'page',
        pageSizeKey: 'results'
      }
    })
    //
    const pagination = computed(() => ({
      total: 200,
      current: current.value,
      pageSize: pageSize.value
    }))
    console.log(pagination)
    const handleTableChange = (pag, filters, sorter) => {
      console.log(pag, filters, sorter)
      run({
        results: pag.pageSize,
        page: pag?.current,
        sortField: sorter.field,
        sortOrder: sorter.order,
        ...filters
      })
    }

    return {
      dataSource,
      pagination,
      loading,
      columns,
      handleTableChange
    }
  }

})
</script>
<style lang="less">

</style>
